<template>
  <div class="payment-container">
    <h1>选择支付方式</h1>
    <van-cell-group class="my-title">
      <van-cell>
        <template #title>
          <van-icon
            name="wechat"
            size="24"
            class="payment-icon"
            @click="handlePayment('微信')"
          />
        </template>
      </van-cell>
      <van-cell>
        <template #title>
          <van-icon
            name="alipay"
            size="24"
            class="payment-icon"
            @click="handlePayment('支付宝')"
          />
        </template>
      </van-cell>
    </van-cell-group>
    <van-dialog v-model="showDialog" title="提示" @confirm="showDialog = false">
      <span>{{ dialogMessage }}</span>
    </van-dialog>
  </div>
</template>

<script>
import { showToast } from 'vant'

export default {
  data() {
    return {
      showDialog: false,
      dialogMessage: '',
      hasPurchased: false // 假设已经购买过该商品
    }
  },

  methods: {
    handlePayment(paymentMethod) {
      try {
        if (this.hasPurchased) {
          this.dialogMessage = '您已经购买过此商品'
          showToast(this.dialogMessage)
          this.showDialog = true
        } else {
          this.dialogMessage = `${paymentMethod} 支付成功`
          showToast(this.dialogMessage)
          this.showDialog = true
          this.hasPurchased = true // 设置已经购买过该商品
        }
      } catch (error) {
        console.error('支付失败:', error)
        showToast('支付失败，请稍后重试')
      }
    }
  }
}
</script>

<style scoped>
.payment-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* 改为顶部对齐 */
  height: 100vh;
  padding-top: 50px; /* 添加顶部内边距 */
}

.my-title {
  margin-top: 20px;
}

.payment-icon {
  transition: transform 0.3s ease;
}

.payment-icon:hover {
  transform: scale(1.2);
}
</style>
